import React, { Component, createRef } from 'react';
import { getTitles, getList } from './api'
import './App.scss'
import Tab from './components/Tab'
import BScroll from '@better-scroll/core'
import ObserveDOM from '@better-scroll/observe-dom'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'

BScroll.use(PullDown)
BScroll.use(Pullup)
BScroll.use(ObserveDOM)

class App extends Component {
  state = {
    // 标题
    titles: [],
    // 列表
    list: [],
    // 高亮下标
    activeIndex: 1,
    // 分页
    pageSize: 10,
    pageCode: 1,
    // 上拉状态
    pullUpState: false
  }
  // 切换高亮
  handleChangeActiveIndex = i => {
    this.setState({
      activeIndex: i,
      list: []
    }, () => {
      // 重新请求数据
      this.getListAndSet()
    })
  }
  // 请求标题
  async getTitlesAndSet() {
    const resp = await getTitles()
    const { data } = resp.data
    this.setState({
      titles: data
    }, () => {
      //  请求列表
      this.getListAndSet()
    })
  }
  // 请求列表
  async getListAndSet() {
    const { titles, activeIndex, pageCode, pageSize, list } = this.state
    const resp = await getList({
      id: titles[activeIndex].id,
      pageCode,
      pageSize,
    })
    const { data } = resp.data
    const newList = list.concat(data)

    this.setState({
      list: newList,
      pageCode: pageCode + 1
    })
  }
  // 初始化bs
  initBscroll() {
    this.BScroll = new BScroll(this.bsWrapper.current, {
      // 当dom发生改变 自动调用refresh
      observeDOM: true, // 开启 observe-dom 插件
      // 开启上拉加载
      pullUpLoad: true,
      // 开启下拉刷新
      pullDownRefresh: true
    })
    // 监听滑到底部的事件    上拉加载
    this.BScroll.on('pullingUp', this.pullingUpHandler)
    // 监听滑到顶部的事件    下拉刷新
    this.BScroll.on('pullingDown', this.pullingDownHandler)
  }
  pullingUpHandler = async () => {
    this.setState({
      pullUpState: true
    })
    // 延迟两秒
    await new Promise(resolve => setTimeout(resolve, 2000))
    await this.getListAndSet()
 
    this.BScroll.finishPullUp()
    this.setState({
      pullUpState: false
    })
  }
  pullingDownHandler = () => {
    this.setState({
      pageCode: 1,
      list: []
    }, async () => {
      await new Promise(resolve => setTimeout(resolve, 2000))
      await this.getListAndSet()

      this.BScroll.finishPullDown()
    })
  }
  constructor (props) {
    super(props)
    // 作用到标签上  返回dom 节点
    this.bsWrapper = createRef()
  }
  render() {
    const { titles, activeIndex, list, pullUpState } = this.state
    return (
      <div className="app">
        <header>
          <Tab activeIndex={activeIndex} titles={titles} handleChangeActiveIndex={ this.handleChangeActiveIndex }></Tab>
        </header>
        <main>
          <div className="better-wrapper" ref={ this.bsWrapper }>
            <div className="beeter-scroll">
              <div className="list">
                {
                  list.length > 0 && list.map((v, i) => {
                    return (
                      <dl key={i}>
                        <dt>
                          <img src={v.url} alt="" />
                        </dt>
                        <dd>
                          <h3>{v.title}------{ v.id } </h3>
                          <p>{v.desc}</p>
                        </dd>
                      </dl>
                    )
                  })
                }
              </div>
              <div>
                {
                  pullUpState ? <p>数据加载中...</p> : <p>上拉加载</p> 
                }
              </div>
            </div>
          </div>
        </main>
      </div>
    );
  }
  componentDidMount() {
    // 请求标题
    this.getTitlesAndSet()  
    // 开启bs
    this.initBscroll()
  }
  
}

export default App;



// ES module
// 1.默认
// 抛出 export default list
// 引入  import list from '相对路径'
// 2.抛出对象
// 抛出 export const a = 1
// 抛出 export function add() {}
// 引入 import { a, add } from '相对路径'
